<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./stylesheets/css/myCssReset.css">
  <link rel="stylesheet" href="./stylesheets/css/header.css">
  <link rel="stylesheet" href="./stylesheets/css/movieinfo.css">
  <script src="./javascripts/common/jquery.min.js"></script>

</head>

<body>
  <header id="header"></header>
  <div class="main">
    <div class="left_main">
      <!-- <div class="title">
        <span class="name">五个濮水的少年</span>
        <span class="year">(2021)</span>
      </div>

      <div class="content">
        <div class="left_content">
          <img src="./images/tt0078748.webp" alt="">
          <div class="rating">

            <div class="peanut">花生评分</div>
            <div class="rating_self">
              <strong>7.3</strong>
              <div class="rating_right">
                <div class="rating_star"></div>
                <a href="javascript: void(0)">1人评论</a>
              </div>

            </div>
            <div class="good">
              <div>好于 53% 运动片</div>
              <div>好于 64% 喜剧片</div>
            </div>
          </div>
          <div class="info">
            <span>导演：宋哈哈</span>
            <span>编剧：缪倩 / 宋灏霖</span>
            <span>主演: 辛云来 / 冯祥琨 / 李孝谦 / 吴俊霆 / 王川</span>
            <span>类型: 喜剧 / 运动</span>
            <span>制片国家/地区: 中国大陆</span>
            <span>语言: 汉语普通话</span>
            <span>上映日期: 2021-10-01</span>
            <span>片长: 111分钟</span>
            <span>IMDb: tt15163768</span>
          </div>
        </div>
      </div>

      <div class="movieintro">
        <h2>五个扑水的少年的剧情简介 · · · · · ·</h2>
        <p>在我们普通的青春里，最疯狂的高光时刻会是什么？张伟（辛云来 饰）是一个长相普通、成绩中游的高二学生，
          是老师和妈妈眼中的「差生」。面对多方打压，他也渐渐对自己失去了信心，直到意外被任命为学校组建的男子花样游泳
          队队长，他一点点被改变……从来没有被人相信过的他面对队友高飞（李孝谦 饰）、陈铭涵（冯祥琨 饰）、蛐蛐（王川 饰）
          、王子（吴俊霆 饰）的信任，第一次有了想要赢一次的想法。为了心中重燃的热血，少年们决定一起迎接这场“男子花样游泳
          ”的青春反击战……</p>
      </div>
      <div class="comment">
        <h2>五个扑水的少年的影评 · · · · · ·</h2>
        <ul>
          <li class="comment_item">
            <h3>
              <span class="username">SingLesinger </span>
              <span class="comment_star"></span>
              <span class="comment_time"> 2021-09-30</span>
            </h3>
            <p>“女孩练花游柔美，男孩花游要阳刚。”是说给领导们听的吧。完全没必要的爱情线是为了市场吧。我懂，我都懂。力所能及地中二了，
              出了影院看到热搜“迪迦奥特曼下架”笑了。青春无敌，无奈我们都只能是老袁。</p>
          </li>
          <li class="comment_item">
            <h3>
              <span class="username">SingLesinger </span>
              <span class="comment_star"></span>
              <span class="comment_time"> 2021-09-30</span>
            </h3>
            <p>“女孩练花游柔美，男孩花游要阳刚。”是说给领导们听的吧。完全没必要的爱情线是为了市场吧。我懂，我都懂。力所能及地中二了，
              出了影院看到热搜“迪迦奥特曼下架”笑了。青春无敌，无奈我们都只能是老袁。</p>
          </li>
          <li class="comment_item">
            <h3>
              <span class="username">SingLesinger </span>
              <span class="comment_star"></span>
              <span class="comment_time"> 2021-09-30</span>
            </h3>
            <p>“女孩练花游柔美，男孩花游要阳刚。”是说给领导们听的吧。完全没必要的爱情线是为了市场吧。我懂，我都懂。力所能及地中二了，
              出了影院看到热搜“迪迦奥特曼下架”笑了。青春无敌，无奈我们都只能是老袁。</p>
          </li>
        </ul>
      </div> -->
    </div>

  </div>
  <div class="right_main"></div>
  </div>

  <footer id="footer"></footer>
</body>

<script>
  $(function () {
    const prefix = 'http://localhost:3000/images/'
    //拼接图片路径后缀
    const suffix = '.webp'


    $('#header').load('./common/header.html')
    $('#footer').load('./common/footer.html')

    const url = window.location.search;
    // 解码url，得到电影名称
    const mname = decodeURI(url).replace('?mname=', '')

    $.ajax({
      url: 'http://localhost:3000/movie/movieinfo',
      data: {
        mname: mname
      },
      success: result => {
        console.log(result);
        let str = ''
        for (const i of result.data) {
          str = str +
          `<div class="title">
  <span class="name">${i.mname}</span>
  <span class="year">(${i.mshowdate.slice(0, 4)})</span>
</div>

<div class="content">
  <div class="left_content">
    <img src="${prefix + i.mimage + suffix}" alt="">
    <div class="rating">
      <div class="peanut">花生评分</div>
      <div class="rating_self">
        <strong>${i.mscore}</strong>
        <div class="rating_right">
          <div class="rating_star"></div>
          <a href="javascript: void(0)">${result.data.length}人评论</a>
        </div>
      </div>

      <div class="good">
        <div>好于 53% 运动片</div>
        <div>好于 64% 喜剧片</div>
      </div>
    </div>

    <div class="info">
      <span>导演：${i.mdirector}</span>
      <span>编剧：${i.mwritter}</span>
      <span>主演: ${i.mactor}</span>
      <span>类型: ${i.mcategory}</span>
      <span>制片国家/地区: ${i.mcountry}</span>
      <span>语言: ${i.mlanguage}</span>
      <span>上映日期: ${i.mshowdate.slice(0, 10)}</span>
      <span>片长: ${i.mlength}分钟</span>
      <span>IMDb: ${i.mimage}</span>
    </div>
  </div>
</div>

<div class="movieintro">
  <h2>${i.mname}的剧情简介· · · · · ·</h2>
  <p>${i.mintroduction}</p>
</div>

<div class="comment">
  <h2>${i.mname}的影评· · · · · ·</h2>
  <ul>
    <li class="comment_item">
      <h3>
        <span class="username">${i.useraccount}</span>
        <span class="comment_star"></span>
        <span class="comment_time">${i.ctime.slice(0, 10)}</span>
      </h3>
      <p>${i.ccontent}</p>
    </li>
  </ul>
</div>`

        }

        $('.main .left_main').html(str)
      },
      error: err => {
        console.log(err);
      }
    })


  })

</script>

</html>